:root {
  --black: #393730;
  --white: #DDE6EF;
  --primary-dark: #58613E;
  --primary-light: #8C8F5C;
  --secondary: #A6BBC8;
  --secondary-dark: #869CAF;
  --roundness: 2px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  font-family: sans-serif;
  color: var(--black);
}

#map { 
  width: 100%;
  height: 70vh; 
}

/* elevation */
.elevation-wrapper {
  width: 100%;
  height: 30vh;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;

}

.elevation-wrapper > div {
  background: #fff;
  width: 100vw;
  padding-top: 2em;
}

.elevation-wrapper.is-scrollable > div {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.2' height='19.8' style='overflow:visible;enable-background:new 0 0 7.2 19.8' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bopacity:.15%7D%3C/style%3E%3Cpath class='st0' d='M0 8.1h3.6v3.6H0zM0 16.2h3.6v3.6H0zM0 0h3.6v3.6H0z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 5px;
  background-position: 0 9px;
}

.elevation-control .background {
  border-radius: 0;
}

/* markers */
.leaflet-marker-icon {
  opacity: 0;
}
/*.is-zoom-mid .leaflet-marker-icon,*/
.is-zoom-strong .leaflet-marker-icon {
  opacity: 1;
}
img.leaflet-marker-icon {
  width: 12px !important; 
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -12px !important;
}
.is-zoom-strong img.leaflet-marker-icon {
  width: 16px !important;
  height: 16px !important;
  margin-left: -8px !important;
  margin-top: -16px !important;
}

/* mile markers */
.mile-marker {
  opacity: 1;
  display: none;
  align-items: flex-end;
  justify-content: center;
  width: 12.6701px;
  height: 19px;
  font-size: 8px;
  font-weight: bold;
}

.is-zoom-mid .mile-marker {
  display: flex;
  text-shadow: 1px 1px 0 #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
}

.is-zoom-strong .mile-marker {
  display: flex;
  background: url('/img/markers/mile.png');
  background-size: 100%;
  text-shadow: none;
  align-items: flex-start;
}

/* modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:  rgba(0, 0, 0, 0.8);
  z-index: 100;
  display: none;
  padding: 3em 1em 1em;
  align-items: stretch;
  justify-content: stretch;
}
.modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.modal-is-open .modal {
  display: flex;
}
.modal__dialog {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 1 0 100%;
  background: #fff;
  border-radius: var(--roundness);
}
.modal__close-btn {
  border: 0;
  background: var(--primary-light);
  border-radius: var(--roundness);
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
}
.modal__close-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 13px;
  height: 1px;
  background: #fff;
}
.modal__close-btn span:nth-child(1) {
  transform: translate(-50%, -50%) rotateZ(-45deg);
}
.modal__close-btn span:nth-child(2) {
  transform: translate(-50%, -50%) rotateZ(45deg);
}

/* Leaflet savetiles */
.leaflet-control.savetiles {
  display: none;
}
@media screen and (orientation: landscape) {
  .leaflet-control.savetiles {
    display: block;
  }
}
